學習目標

接續 Day10 的內容。
主要的內容是學如何更新和刪除既有的英雄資料。

更新英雄資料

目標功能是在修改完英雄名稱後，透過按下儲存按鈕，將修改完的內容回傳到伺服器中，將舊有的資料覆寫掉。

--- hero-detail.component.ts ---
import { HERO } from '../hero';
import { HeroService } from '../hero.service';
@Component({
  // ...
})
export class HeroDetailComponent implements OnInit { 
  constructor(private heroService:HeroService) { }
  save(): void {
    if (this.hero) {
      this.heroService.updateHero(this.hero)
        .subscribe(() => this.goBack());
    }
  }
}

在 heroDetailComponent 元件中，引入了 heroService 的服務，並新增的儲存英雄資料的函式，將要被儲存的英雄資料傳入 heroService 的 updateHero 函式中。

--- hero.service.ts --- 
httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

updateHero(hero: Hero): Observable<any> {
  return this.http.put(this.heroesUrl, hero, this.httpOptions).pipe(
    catchError(this.handleError<any>('updateHero'))
  );
}

在 heroService 這邊，因為 put 方法，需要 header ，所以，我們會先定義一個 httpOptions 變數，裡面會包一個 headers 的屬性，接著，再將它傳入到 put 的第三個參數中。
而 updateHero 方法就是將傳入的英雄資料，傳到指定的 heroesUrl 目的地。

新增英雄資料

我們會利用 http.post 的方法，來將欲新增的英雄資料推到資料庫中。
先在 hero 元件中呼叫 post 方法來新增資料庫的內容，接著，再將新增的內容推到陣列當中。
它一樣是需要三個參數，這個三個參數跟 http.put 的三個一樣，這邊就不再贅述了。

--- heroes.component.ts ---
add(name: string): void {
  name = name.trim();
  if (!name) { return; }
  this.heroService.addHero({ name } as HERO) // 將新增的英雄資料丟到 addHero 函式中
    .subscribe((hero:HERO) => {
      this.heroes.push(hero);  // 在 post 完成之後，將新增的英雄推進英雄陣列中
    });
}

在 heroComponent 元件中，新增了新增英雄資料的函式 add。

--- hero.service.ts --- 
addHero(hero: HERO): Observable<HERO> {
    return this.http.post<HERO>(this.heroesUrl, hero, this.httpOptions).pipe(
      catchError(this.handleError<HERO>('addHero'))
    );
  }

在 heroService 檔案將傳入的新增英雄資料 post 到資料庫中。

刪除英雄資料

目標功能就是刪除某個英雄資訊。

--- heroes.component.ts ---
delete(hero: Hero): void {
  this.heroes = this.heroes.filter(h => h !== hero);
  this.heroService.deleteHero(hero.id).subscribe();
}

這邊的操作事先將其他非指定被刪除的資料重新存到 heroes 陣列中。

Note:
要特別注意一下，在 deleteHero 結束之後，有接一個沒有執行任何內容的 subscribe。
官方文件特別提到，只要是回傳 Observable 實例，後面一定要接 subscribe。不然，這個回傳的 Observable 不會執行任何內容，直到遇到下一個 subscribe 的時候，才會執行它。

接著，再將指定刪除的英雄的 id 傳入刪除的函式中。

--- hero.service.ts ---
deleteHero(id: number): Observable<Hero> {
  const url = `${this.heroesUrl}/${id}`;

  return this.http.delete<Hero>(url, this.httpOptions).pipe(
    catchError(this.handleError<Hero>('deleteHero'))
  );
}

Summary

這邊做個總結

1. 由本篇可以知道怎麼在 Angular 中，實作 CURD 的方法。
2. 知道怎麼將製作好的 header 內容，傳入到 put, post 這些 Http 要求方法的第三個參數中，來實現 post 和 put 的方法。